<template>
  <div>
    <!-- <div class="logo">
      <img :src="LogoImg" style="width: 140px" />
    </div> -->
    <el-scrollbar wrap-class="scrollbar-wrapper">
      <el-menu
        :default-active="activeMenu"
        :collapse="isCollapse"
        mode="vertical"
        text-color="#1f2d3d"
        :collapse-transition="false"
        :router="true"
        :default-openeds="openeds"
      >
        <sidebar-item :routes="activeRoutes" />
      </el-menu>
    </el-scrollbar>
  </div>
</template>

<script>
import SidebarItem from './SidebarItem'
import logo from '@/assets/logo.png'
export default {
  name: 'Sidebar',
  provide() {
    return {
      sidebar: this
    }
  },
  props: {
    isCollapse: {
      type: Boolean,
      default: true
    },
    LogoImg: {
      type: String,
      default: logo
    },
    defaultIcon: {
      type: String,
      default: ''
    },
    defaultTitle: {
      type: String,
      default: ''
    },

    roles: {
      type: Array,
      default: () => ['quanxian2']
    },
    Routers: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      activeRoutes: [],
      openeds: ['', '/orders', '/device', '/attraction', '/accountManage', '/financial']
    }
  },
  components: { SidebarItem },
  computed: {
    activeMenu() {
      const route = this.$route
      const { meta, path } = route
      // if set path, the sidebar will highlight the path you set
      if (meta.activeMenu) {
        return meta.activeMenu
      }
      return path
    }
  },
  mounted() {
    this.activeRoutes = this.routesFilter(this.Routers)
  },
  methods: {
    // 对路由进行过滤
    routesFilter(routes) {
      const _this = this
      if (routes.length === 0) return []
      let _routes = []
      routes.forEach((route) => {
        // 处理该层路由 状态 ： 隐藏 、跳过
        switch (route.state) {
          case 'hidden':
            break
          case 'jump':
            if (route.children && route.children.length !== 0) {
              route = _this.routesFilter(_this.routesAddPre(route.children, route.path))
              _routes = _routes.concat(route)
            }
            break
          default:
            if (route.children) {
              route.children = _this.routesFilter(route.children)
              route.children.length === 0 && delete route.children
            }
            // 当route 存在roles 时，对比用户roles列表，是否存在该route的某一部分权限，存在则 push
            if (route.meta && route.meta.roles && route.meta.roles.length > 0) {
              let union = Array.from(new Set(_this.roles.concat(route.meta.roles)))
              let isHasRoles = union.length < route.meta.roles.length + _this.roles.length
              isHasRoles && _routes.push(route)
            } else {
              // 不存在roles 的route直接push
              _routes.push(route)
            }

            break
        }
      })

      return _routes
    },
    // 对跳过层的 子路由 追加完整path
    routesAddPre(routes, pre) {
      if (routes.length === 0) return []
      return routes.map((route) => {
        route.path = pre ? `${pre}/${route.path}` : route.path
        // 不需要对route 子路由再进行pre追加
        return route
      })
    }
  }
}
</script>
